<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="mxj">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>登陆</title>
	<link rel="shortcut icon" href="favicon.ico" />
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		
	</script>
	<style>
		* {
			font-size: 14px;
		}
		body{
			background-image:url('img/bg2.png');
		}
		#shiqux option {
			font-size: 12px;
			height:30px;
		}
		#captcha {
            position: relative;
            width: 300px;
            height: 150px;
			
            background-image: url('app.php?act=img'); /* 引用生成验证码图片的PHP脚本 */
            background-size: cover;
        }
        #slider {
            position: absolute;
            left: 0px; /* 初始位置 */
            top: 70px;
            width: 42px;
            height: 42px;
           /* background-image: url('img/icon-button-normal.png');*/ /* 引用生成验证码图片的PHP脚本 */
            background-size: cover;
			
			background-color: rgba(255, 255, 255, 0.1); /* 设置半透明背景 */
			/*opacity: 0.6;  整个div 50% 透明度 */
            cursor: move;
			z-index:1001;
        }
		.modal {
		  display: none;
		  justify-content: center;
		  align-items: center;
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
		  backdrop-filter: blur(5px); /* 虚化背景 */
		}
		.form-control{
			border-color:#fff;
			margin-bottom:10px;
		}
	</style>
</head>

<body>
	<div class="content_m" >
					
		<div class="container" style="margin-top: 30%;padding:30px;background: rgba(255,255,255,0.1);border-radius: 16px;">

			
			<form id="login" method="post" action="/login" class="form-horizontal">
				<input type="hidden" text="0" id="verifycode" name="sliderPos">
				<div class="row">
					<input type="user" placeholder='请输入用户名' name="username" value="" class="form-control mar_top_30" style="font-size: 14px;height: 40px;line-height: 40px;border-radius: 10px;width:80%;margin-left:10%;">
				</div>
				<div class="row">
					<input type="password" placeholder='请输入密码' name="password" class="form-control mar_top_30" style="font-size: 14px;height: 40px;line-height: 40px;border-radius: 10px;width:80%;margin-left:10%;">
					
				</div>
				<div class="row" style="border:1px solid #ccc;background-color:#fff; width:40%;height:40px;margin-left:10%;line-height: 40px;border-radius: 10px;">
					<span  class="form-control verify" style="font-size: 14px;height: 40px;line-height: 40px;border-radius: 10px;width:40%;margin-left:10%;text-align:center;color:green;">点击验证</span>
				</div>
					<!---->
				<div class="row " style="color:#FAFEBD;margin-top: 10px;">
					<button type="submit" class="btn btn-primary col-xs-2 col-sm-2 mar_l_20" style="font-size: 14px;height: 30px;border-radius: 10px;margin-top:20px;margin-left:30%;width:40%;border-color:blue;color:red">登录</button>
				</div>
			</form>

		</div>
		<p style="margin-bottom: 28px;padding: 24px;text-align: center;display:none;">
			<a href="https://beian.miit.gov.cn">浙ICPxxxxxxxx号-1</a>
		</p>
	</div>
	<div class="modal">
			<div class="captchacode" style="padding:5px;background-color:#fff;border-radius:5px;">
				<div id="captcha">
						<div id="slider"></div>
				 </div>
				 <div style="width:100%;margin-top:15px;position:relative;">
					<p style="width:100%;height:36px;line-height:36px;text-align:center;padding-left:0px;border-radius:20px;border:1px solid #fff;background-color:#CCCCCC; color:blue;">
						拖动左边滑块完成上方图片验证
					</p>
					<p style="height:50px;line-height:50px;text-align:center;width:50px;border-radius:40px;border:1px solid #CCCCCC;position:absolute;top:-22px;background-color:#fff;" id="movep"><font color="blue">|||</font></p>
				 </div>
				 <div style="margin-top:0px;height:30px;line-height:30px;border-top:1px solid #CCCCCC;text-align:right;">
					<!-- <font style="font-size:32px;margin-right:10px;color:#ccc;margin-top:10px;">◎</font>-->
					 <font style="font-size:22px;margin-right:60px;color:blue;" class="tishi"></font>
					 <font style="font-size:22px;margin-right:10px;" class="closeimgcode">✖</font>
				 </div>
			 </div>
	</div>
<script>
	// JavaScript处理滑块拖动和验证
	$(document).ready(function() {
		let isMouseDown = false;
		let startX;
		let slider = $('#slider');
		let captcha = $('#captcha');
		let movep = $('#movep');
		$('.closeimgcode').click(function () {
			$('.modal').hide();
		})
		$('.verify').click(function () {
			$('.modal').css('display','flex');
			$('.modal').show();
		});
		slider.css("background-image","url('app.php?act=getcimg')");
		slider.on("touchstart", function(event) {
			// 处理 touchstart 事件的代码
			isMouseDown = true;
			//console.log('touchstart');
		});
		movep.on("touchstart", function(event) {
			// 处理 touchstart 事件的代码
			isMouseDown = true;
			//console.log('touchstart');
		});
		movep.on("touchmove", function(event) {
			//console.log('touchmove');
			if (!isMouseDown) return;
			// 获取触摸点的坐标
			var touch = event.originalEvent.touches[0];
			var x = touch.pageX-50;
			
			// 移动元素
			$("#slider").css("left", x);
			movep.css("left", x);
		});
		captcha.on("touchmove", function(event) {
			//console.log('touchmove');
			if (!isMouseDown) return;
			// 获取触摸点的坐标
			var touch = event.originalEvent.touches[0];
			var x = touch.pageX-50;
			
			// 移动元素
			$("#slider").css("left", x);
			movep.css("left", x);
		});

		captcha.on("touchend", function(event) {
			//console.log('touchend');
			isMouseDown = false;
			// 处理 touchend 事件的代码
			var sliderPos = slider.position().left;
			sendverify(sliderPos);
		});
		movep.on("touchend", function(event) {
			//console.log('touchend');
			isMouseDown = false;
			// 处理 touchend 事件的代码
			var sliderPos = slider.position().left;
			sendverify(sliderPos);
		});
		function sendverify(sliderPos){
			$('#verifycode').val(sliderPos);
			// 发送滑块位置到后端验证
			$.post('app.php?act=verify', { sliderPos: sliderPos }, function(result) {
				if (result.success) {
					$('.tishi').text('验证成功');
					$('.modal').hide();
					$('.verify').html("<font color=blue>验证成功</font>");
				} else {
					$('.tishi').text('验证失败，请重试');
					// 重置滑块位置
					slider.css('left', '0px');
					movep.css("left", '0px');
				}
			});
		}
		$('#login').submit(function() {
				var code = $('#verifycode').val();
				//console.log('code:'+code);
				if (code == 0) {
					$('.modal').css('display','flex');
					$('.modal').show();
					return false;
				}
				$.ajax({
					url: 'app.php?act=login',
					dataType: 'json',
					type: 'post',
					data: $(this).serialize(),
					success: function(res) {
						if (res.retcode == 0) {
							window.location.href = "?index";
						} else {
							alert(res.msg);
							 $('#verifycode').val(0);
							 $('.verify').html("<font color=blue>点击验证</font>");
							 $('.tishi').text('');
						}
						// console.log(res);
					}
				});
				return false;
			});
	});
</script>
</body>

</html>